<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <button id="btn">点击发送jsonp</button>
  </body>
</html>
<script>
  // jsonp请求 用于解决跨域问题

  // 本质是通过动态创建script标签,通过script标签的src属性来完成请求

  // jsonp请求只支持get请求

  // 跨域的解决方案有哪些? 1.通过浏览器插件 2.jsonp 3.服务端

  var btn = document.querySelector("#btn");
  btn.onclick = function () {
    //3.移除script标签
    //总是移除上一个id叫做jsonp的script

    if (document.querySelector("#jsonp")) {
      document.body.removeChild(document.querySelector("#jsonp"));
    }

    //1.动态创建script标签
    let script = document.createElement("script");
    //给script添加id
    script.id = "jsonp";
    //2.通过script的src属性进行访问服务器地址
    script.src =
      "https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=36309,36005,35911,36166,34584,36120,36075,36125,35802,36233,26350,36303,22159,36061&wd=上海&req=2&bs=192.1681.1&csor=2&cb=success";
    //将script添加到页面
    document.body.appendChild(script);
  };

  //4.通过函数的回调来获得服务器返回的数据
  function success(res) {
    console.log(res);
  }

  //总结:

  //1.核心就是创建script,通过script标签的src属性来访问服务器

  //2.给这个地址传递相应的回调函数的名字就可以了
</script>
